<template>
	<div class="view-home">
		<el-row :gutter="15">
			<el-col :lg="6" :md="12" :xs="24">
				<div class="item">
					<p class="t">应用数量</p>
					<p class="v">{{ count.appCount }}</p>
				</div>
			</el-col>
			<el-col :lg="6" :md="12" :xs="24">
				<div class="item">
					<p class="t">Topic数量</p>
					<p class="v">{{ count.topicCount }}</p>
				</div>
			</el-col>
			<el-col :lg="6" :md="12" :xs="24">
				<div class="item">
					<p class="t">任务数量</p>
					<p class="v">{{ count.jobCount }}</p>
				</div>
			</el-col>
			<el-col :lg="6" :md="12" :xs="24">
				<div class="item">
					<p class="t">任务记录</p>
					<p class="v">{{ count.recordCount }}</p>
				</div>
			</el-col>
		</el-row>

		<el-row :gutter="15">
			<el-col :lg="24" :xs="24">
				<div class="card">
					<div class="card__header">任务记录数量</div>

					<div class="card__container" style="height: 560px">
						<v-chart :option="askChart" autoresize />
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts" name="home" setup>
import { useCool } from "/@/cool";
import { onMounted, ref, reactive } from "vue";
import "echarts";

const { service } = useCool();
const count = ref({
	appCount: 0,
	topicCount: 0,
	jobCount: 0,
	recordCount: 0
});

const askChart = reactive({
	tooltip: {
		trigger: "axis"
	},
	grid: {
		top: "20px",
		bottom: "30px",
		right: "10px",
		left: "10px",
		containLabel: true
	},
	xAxis: {
		type: "category",
		data: []
	},
	yAxis: {
		type: "value"
	},
	series: [
		{
			data: [],
			type: "line",
			name: "任务记录数量"
		}
	]
});

onMounted(async () => {
	service.count.home.top().then((res) => {
		count.value = res;
	});
	service.count.home.chart().then((res) => {
		if (res) {
			askChart.xAxis.data = res.dates;
			askChart.series[0].data = res.datas;
		}
	});
});
</script>

<style lang="scss">
.view-home {
	.item {
		border-radius: 5px;
		background-color: #fff;
		padding: 20px 20px;
		margin-bottom: 10px;

		.t {
			font-size: 16px;
			color: #999;
			margin-bottom: 20px;
		}

		.v {
			font-size: 20px;
			font-weight: bold;
		}
	}
	.card {
		background-color: #fff;
		border-radius: 5px;
		margin-bottom: 15px;
		font-size: 12px;
		letter-spacing: 0.5px;
		color: #000;

		&__header {
			display: flex;
			align-items: center;
			height: 50px;
			padding: 0 20px;

			.label {
				font-size: 12px;
			}

			.value {
				font-size: 18px;
				font-weight: bold;
				margin-left: 10px;
			}
		}

		&__container {
			padding: 0 20px;
			height: 50px;
		}

		&__footer {
			display: flex;
			align-items: center;
			height: 50px;
			border-top: 1px solid #f7f7f7;
			font-size: 12px;
			margin: 0 5px;
			padding: 0 15px;
			box-sizing: border-box;

			.label {
				margin-right: 10px;
			}

			.value {
				font-size: 13px;
			}
		}
	}
}
</style>
